<template>
<div class="post">
    <h3 @click="toDetials(post.id)">{{post.title}}</h3>
    <p>{{snippet}}</p>
    <span v-for="tag in post.tags" :key="tag">#{{tag}}</span>
</div>
</template>

<script setup>
const router = useRouter();
const posts = defineProps({
  post: Object,
});
const snippet = computed(()=>{
    return posts.post.body.substring(0,20) + '...';
})

// 准备进行
const toDetials = (id)=>{
  console.log(id);
  router.push({ path: '/Details', query: { Id: id}})
}
</script>

<style >
.post {
  margin: 0 40px 30px;
  padding-bottom: 30px;
  border-bottom: 1px dashed #e7e7e7;
}
.post h3 {
  display: inline-block;
  position: relative;
  font-size: 26px;
  color: white;
  margin-bottom: 10px;
  max-width: 400px;
}
.post h3::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ff8800;
  position: absolute;
  z-index: -1;
  padding-right: 40px;
  left: -30px;
}
</style>